<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-form-item label="数据源类型" prop="type">
          <el-select v-model="filterPara.type" placeholder="数据源类型" size="small" @change="handleSearch">
            <el-option
              v-for="item in dataBaseType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数据源名称" prop="name">
          <el-input
            v-model="filterPara.name"
            placeholder="请输入搜索关键字"
            type="primary"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
            @input="handleSearch"
          />
        </el-form-item>
        <el-form-item class="pull-right">
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="getDatabaseList">刷新</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增数据源</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>

      <el-table v-loading="loading" :data="possessionList.list"></el-table>
    </el-row>
  </div>
</template>
<script>
  import {listDataSource,testDatabase,addDatabase,delDatabase} from "@/api/manage/database";
  export default {
    name: "Db",
    dicts: [],
    data() {
      return {
        filterPara:{
          type:undefined,
          name:undefined,
        },
        databases:{
          originList:[],
          list:[],
          pagedList:[],
          pageParams:{
            pageNum:1,
            pageSize:10,
            total:undefined,
          },
        },
        dialog:{
          open:false,
          title:"",
          form:{
          },
        },
        dataBaseType:[{
          value:'all',
          label:'全部',
        },{
          value:'mysql',
          label:'mysql',
        },{
          value:'hive',
          label:'hive',
        },
        ]
      }
    },
    created() {
    },
    methods: {
      getDatabaseList(){

      },
      handleAdd(){

      },
      handleSearch(){
        let newlist=[];
        this.databases.originList.forEach(item=>{
          newlist.push(item)
        });
        this.databases.list=newlist;
        this.handlePaging();
      },
      resetPaging(){

      },
      handlePaging(){
        let params=this.databases.pageParams;
        this.databases.pagedList=this.databases.list.slice(
          (params.pageNum-1)*params.pageSize,
          params.pageNum*params.pageSize
        );
      }
    },
  }
</script>
